<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>File Upload</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>File Upload</h1>

<form id="uploadForm" enctype="multipart/form-data">
    <input type="file" id="file" name="file"/>
    <button type="button" onclick="uploadFile()">Upload</button>
</form>

<p id="message"></p>

<script>
    const backendPort = 8101;
    function uploadFile() {
        const file = document.getElementById('file').files[0];
        const chunkSize = 1024 * 1024; // 1MB
        const totalChunks = Math.ceil(file.size / chunkSize);

        for (let i = 0; i < totalChunks; i++) {
            const chunk = file.slice(i * chunkSize, (i + 1) * chunkSize);
            const formData = new FormData();
            formData.append('file', chunk);
            formData.append('chunk', i);
            formData.append('totalChunks', totalChunks);
            formData.append('fileName', file.name);

            $.ajax({
                url: 'http://localhost:8081/api/upload/uploadChunk',
                type: 'POST',
                headers: {
                  tokenName:"satoken",
                  tokenValue:"3095fcbd-8d71-4971-a028-24c9bce128b7"
                },
                data: formData,
                processData: false,
                contentType: false,
                xhrFields: {
                    withCredentials: true
                },
                success: function (response) {
                    $('#message').text(response.message);
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    $('#message').text('File upload failed: ' + textStatus);
                }
            });
        }
    }
</script>

</body>
</html>